<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=uft-8">
<title>搜索主贴</title>
<script type="text/javascript" src="${root }/js/jquery-1.8.0.js"></script>
<link rel="stylesheet" type="text/css" href="${root }/css/search.css">
</head>
<body>
	<jsp:include page="WEB-INF/header.jsp"></jsp:include>
	<div class="mainCon">
		<input type="text" id="keyword" name="keyword" placeholder="请输入主贴关键词">
		<input type="button" id="serbtn" value="搜索">
		<table id="resultTable" border="1">
			<tr>
				<td>主贴标题</td>
				<td>板块标题</td>
				<td>发帖时间</td>
				<td>发帖人</td>
			</tr>
			<tr>
				<td colspan="4">请搜索</td>
			</tr>
		</table>
	</div>
	<jsp:include page="WEB-INF/footer.jsp"></jsp:include>
</body>
<script type="text/javascript">
	$(function() {
		$("#serbtn").click(function() {
			//异步请求后台
			$.getJSON("searchTopic.do",
					{"keyword" : $("#keyword").val()},
					function(data) {
						//清除第一行以外的表格行
						$("#resultTable>tbody>tr:not(:first)").remove();
						
						//判断数据列表长度
						if (data.length != 0) {
							for (var t in data) {
								//主贴
								var topicLink = "replay.do?tid=" + data[t].tid + "&page=1";
								var $ttitleTd = $("<td><a href=\""+ topicLink +"\">" + data[t].ttitle + "</a></td>");
								
								console.log(data[t].ttitle);
								
								//板块
								var sectionLink = "topic.do?sid=" + data[t].sid + "&page=1";
								var $sectionTd = $("<td><a href=\"" + sectionLink + "\">" + data[t].sname + "</a></td>");
								
								//时间
								var $timeTd = $("<td>" + data[t].tdateStr + "</td>");
								
								//用户
								var userLink = "user.do?uid=" + data[t].userId;
								var $userTd = $("<td><a href=\"" + userLink + "\">" + data[t].usermname + "</a></td>");
								
								var $row = $("<tr></tr>");
								
								$row.append($ttitleTd);
								$row.append($sectionTd);
								$row.append($timeTd);
								$row.append($userTd);
								
								$("#resultTable").append($row);
								}
						}
						else {
							var $emptyRow = $("<tr><td colspan='4'>结果为空</td></tr>");
							$("#resultTable").append($emptyRow);
						}
					});
		});
	});
</script>
</html>